<template>
	<view :style="{height:navHeight+statusBarHeight+'rpx'}">
		<!-- 微信小程序头部导航栏 -->
		<!-- #ifdef MP-WEIXIN -->
		<view class="wx-head-mod" :style="{
				height:navHeight+statusBarHeight+'rpx',backgroundColor:navBackgroundColor
				}">
			<view class="wx-head-mod-nav" :style="{height:navigationBarHeight+'rpx',top:statusBarHeight+'rpx'}">
				<view class="wx-head-mod-nav-content" :style="{
						height:customHeight+'rpx',justifyContent:titleAlign === 'center'?'center':'left'
						}">
					<!-- 文本区 -->
					<view class="wx-head-mod-nav-content-mian" :style="{
						width:navTextWidth,lineHeight:customHeight + 'rpx',paddingLeft:titlePaddingLeft*scaleFactor+'rpx',
						fontSize:fontSize*scaleFactor+'rpx',fontWeight:fontWeight,color:titleColor,
						textAlign:titleAlign === 'center'?'center':'left'
						}">
						{{title}}
						<slot name="navTitle"></slot>
					</view>
					<!-- 返回按钮 -->
					<view class="wx-head-mod-nav-content-back" :style="{display:isBackShow?'flex':'none'}" @click="backEvent">
						<view class="wx-head-mod-nav-content-back-img" :style="{
								width:backImageWidth*scaleFactor+'rpx',height:backImageHeight*scaleFactor+'rpx'
								}">
							<image :src="backImageUrl" mode="" style="width: 100%;height: 100%;"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- #endif -->

		<!-- 除微信小程序之外的其他设备 -->
		<!-- #ifndef MP-WEIXIN -->
		<view class="other-head-mod" :style="{height:navHeight+statusBarHeight+'rpx',backgroundColor:navBackgroundColor}">
			<view class="other-head-mod-mian" :style="{
					height:navHeight+'rpx',justifyContent:titleAlign === 'center'?'center':'left'
					}">
				<!-- 返回按钮 -->
				<view class="other-head-mod-mian-back" v-show="isBackShow" @click="backEvent">
					<view class="other-head-mod-mian-back-img" :style="{
							width:backImageWidth*scaleFactor+'rpx',height:backImageHeight*scaleFactor+'rpx'
							}">
						<image :src="backImageUrl" mode="" style="width: 100%;height: 100%;"></image>
					</view>
				</view>
				<!-- 标题 -->
				<view class="other-head-mod-mian-title" :style="{
					width:windowWidth - 184+'rpx',lineHeight:navHeight+'rpx',
					paddingLeft:titlePaddingLeft*scaleFactor+'rpx',fontSize:fontSize*scaleFactor+'rpx',
					fontWeight:fontWeight,color:titleColor
					}">
					{{title}}
					<slot name="navTitle"></slot>
				</view>
			</view>
		</view>
		<!-- #endif -->
	</view>
</template>

<script>
	const app = getApp()
	import {
		sys
	} from '@/common/sys.js'
	export default {
		name: "NavBar",
		props: {
			// 标题
			title: {
				type: String,
				default: ''
			},
			// 标题位置 left：左  center：中  
			titleAlign: {
				type: String,
				default: 'center'
			},
			// 标题离左边的距离
			titlePaddingLeft: {
				type: Number,
				default: 16
			},
			// 文本区字体大小
			fontSize: {
				type: Number,
				default: 16 //px
			},
			// 文本区字体粗细
			fontWeight: {
				type: Number,
				default: 400
			},
			// 是否需要返回按钮
			isBackShow: {
				type: Boolean,
				default: false
			},
			// 文本区返回按钮图片宽
			backImageWidth: {
				type: Number,
				default: 8 //px
			},
			// 文本区返回按钮图片高
			backImageHeight: {
				type: Number,
				default: 14 //px
			},
			// 返回按钮图标路径
			backImageUrl: {
				type: String,
				default: '/static/home/back.png'
			},
			// 导航栏整体背景颜色
			navBackgroundColor: {
				type: String,
				default: '#fff'
			},
			// 标题字体颜色
			titleColor: {
				type: String,
				default: '#000',
			},
		},
		computed: {
			// 文本区宽度
			navTextWidth() {
				if (this.titleAlign === 'center') {
					return (this.windowWidth - (this.windowWidth - this.menubarLeft) * 2) + 'rpx'
				} else {
					return this.menubarLeft + 'rpx'
				}
			},
			// 文本区paddingLeft
			titlePaddingLeft() {
				if (this.titleAlign === 'center') {
					return '0'
				} else {
					return this.titlePaddingLeft + 'rpx'
				}
			}
		},
		data() {
			return {
				statusBarHeight: 0, //状态栏高度
				navHeight: 0, //头部导航栏总体高度
				navigationBarHeight: 0, //导航栏高度
				customHeight: 0, //胶囊高度
				scaleFactor: 0, //比例系数
				menubarLeft: 0, //胶囊定位的左边left
				windowWidth: 0
			};
		},
		created() {
			/* 获取设备信息 */
			const sysInfo = sys();
			/* 通用平台 */
			this.statusBarHeight = sysInfo.statusBarHeight; //状态栏高度
			this.scaleFactor = sysInfo.scaleFactor; //比例系数
			this.windowWidth = sysInfo.windowWidth; //当前设备的屏幕宽度
			this.navHeight = sysInfo.navHeight; //仅仅导航栏高度
			/* 微信小程序平台 */
			// #ifdef MP-WEIXIN
			this.navHeight = sysInfo.navHeight + sysInfo.statusBarHeight; //头部导航栏总高度
			this.navigationBarHeight = sysInfo.navHeight; //头部导航栏高度
			this.customHeight = sysInfo.menuButtonHeight; //胶囊高度
			this.menubarLeft = sysInfo.menuButtonLeft; //胶囊左边界距离左上角的距离
			this.navHeight = sysInfo.navHeight; //仅仅导航栏高度
			// #endif

			console.log("this.navHeight:", this.navHeight);
		},
		methods: {
			backEvent() {
				uni.navigateBack({
					delta: 1
				});
			}
		},
	}
</script>

<style>
	/* #ifdef MP-WEIXIN */
	.wx-head-mod {
		box-sizing: border-box;
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9999;
	}

	.wx-head-mod-nav {
		box-sizing: border-box;
		width: 100%;
		position: absolute;
		left: 0;
		display: flex;
		justify-content: center;
		align-items: center;

	}

	.wx-head-mod-nav-content {
		box-sizing: border-box;
		width: 100%;
		display: flex;
		justify-content: left;
		align-items: center;
		position: relative;
	}

	/* 文本区 */
	.wx-head-mod-nav-content-mian {
		box-sizing: border-box;
		height: 100%;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	/* 返回按钮 */
	.wx-head-mod-nav-content-back {
		box-sizing: border-box;
		width: 60rpx;
		height: 100%;
		/* background-color: aqua; */
		position: absolute;
		top: 0;
		left: 32rpx;
		display: flex;
		align-items: center;
		justify-content: left;
	}

	.wx-head-mod-nav-content-back-img {
		box-sizing: border-box;
	}

	/* #endif */

	/* #ifndef MP-WEIXIN */
	.other-head-mod {
		box-sizing: border-box;
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9999;
	}

	.other-head-mod-mian {
		box-sizing: border-box;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: left;
		position: absolute;
		left: 0;
		bottom: 0;
	}

	/* 返回按钮 */
	.other-head-mod-mian-back {
		box-sizing: border-box;
		height: 100%;
		width: 60rpx;
		position: absolute;
		left: 32rpx;
		top: 0;
		display: flex;
		align-items: center;
	}

	/* 标题 */
	.other-head-mod-mian-title {
		box-sizing: border-box;
		height: 100%;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	/* #endif */
</style>